import React from 'react';
import {Table, Button, Card, Form, DatePicker, Input, Popconfirm} from 'antd';
import BBSService from '../../service/BBSService';
import moment from 'moment';
const { RangePicker} = DatePicker;
export default class BBSList extends React.Component {

    state = {
        title:'BBS列表',
        data: [],
        pagination: {pageSize: 5, current: 1,size:'middle'},
        pagStart: {pageSize: 5, current: 1,size:'middle'},
        search: '',
        //列表加载
        tableLoading: false,
        departmentList : [],//下拉框查询数据
        searchParam : {},
        tableList:[],
        loading:false
    };

    constructor(props) {
        super(props);
    }

    componentDidMount() {
        this.fetch(this.state.pagination);
    }

    //查询方法
    fetch(pagination) {
        console.log('pagination.......',pagination);
        this.setState({
            loading: true,
        });
        let pager = {
            query: this.state.search,
            page: pagination.current - 1,
            size: pagination.pageSize,
            current: pagination.current,
            //sort:['receiptDate', 'DESC']
        };
        console.log('pager.......',pager);
        BBSService.getList(pager).done(data=>{
            console.log('data',data.entity);
            if (data.entity) {
                this.setState({
                    tableList: data.entity,
                    loading: false,
                    pagination: {
                        total: parseInt(data.headers['X-Total-Count']),
                        pageSize: this.state.pagination.pageSize,
                        current: pager.current
                    }
                })
            }
        })
    }

    //查询方法
    searchClick() {
        let search = '';
        let params = this.state.searchParam;
        if (params.startTime) {
            search += 'createTime=gte='+params.startTime+';';
            search += 'createTime=lte='+params.endTime+';';
        }
        if (params.title) {
            search ? search += "" : search = "";
            search += 'title=like=' + params.title+';';
        }
        this.state.search = search;
        this.fetch(this.state.pagStart);
    }

    render() {
        return (
            <Card title={this.state.title} className="user" extra={<a onClick={()=>{
                this.props.history.push("/bbs/add");
            }}>+新增</a>}>
                <Form layout="inline" style={{marginBottom:'20px'}}>
                    <Form.Item label={'标题：'}>
                        <Input placeholder="标题"
                               onChange={(e)=>{
                                   console.log(e.target.value);
                                   this.state.searchParam.title = e.target.value
                               }}
                        />
                    </Form.Item>
                    {/*<Form.Item label={'时间：'}>*/}
                        {/*<RangePicker*/}
                            {/*placeholder={['开始时间', '结束时间']}*/}
                            {/*onChange={(e)=>{*/}
                                {/*this.state.searchParam.startTime =  e[0].startOf('day').valueOf();*/}
                                {/*this.state.searchParam.endTime = e[1].endOf('day').valueOf();*/}
                            {/*}}/>*/}
                    {/*</Form.Item>*/}
                    <Form.Item>
                        <Button
                            type="primary"
                            icon="search"
                            onClick={()=>{
                                this.searchClick();
                            }}
                        >搜索</Button>
                    </Form.Item>
                </Form>
                <Table
                    rowKey={record => record.id}
                    bordered={true}
                    loading={this.state.loading}
                    dataSource={this.state.tableList}
                    columns={[
                        {title:"标题", align:'left', dataIndex: 'title', key: 'title',width:150},
                        {title:"创建时间", align:'center', dataIndex: 'createTime', key: 'createTime',render : (text, record) => {
                            return (
                                <span>{record.createTime?moment(record.createTime).format('YYYY／MM／DD HH:mm:ss'):''}</span>
                            )
                        }},
                        {title:"发表人", align:'center', dataIndex: 'name', key: 'name',width:150,render : (text, record) => {
                            if(record.createStudent){
                                return (
                                    <span>{record.createStudent.firstName+' '+record.createStudent.lastName}</span>
                                )
                            }
                        }},
                        {title:"图片", align:'center', dataIndex: 'images', key: 'images',render : (text, record) => {
                            if(record.images){
                                var imgArr = record.images.split(',');
                                return (
                                <div>
                                    {imgArr.map((item,i)=>{
                                        return(
                                            <img key={i} style={{marginLeft:'10px'}} className="img-css" src={item}/>
                                        )
                                    })}
                                </div>
                                )
                            }
                        }},
                        {title:"是否置顶", align:'center', dataIndex: 'topMost', key: 'topMost',width:100,render : (text, record) => {
                            if(record.topMost){
                                return (
                                    <div className="topmost"></div>
                                )
                            }else{
                                return (
                                    <div className="topmost-none"></div>
                                )
                            }
                        }},
                        // {title:"评论数量", align:'center', dataIndex: 'commentCount',width:100, key: 'commentCount'},
                        {title:"操作", align:'center', dataIndex: 'operation', key: 'operation',
                            render : (text, record) => {
                                return (
                                    <div className='btn-cen-div'>
                                        <a onClick={()=>{
                                            this.props.history.push("/bbs/view/" + record.id);
                                        }}>详情</a>
                                        <a onClick={()=>{
                                            this.props.history.push("/bbs/edit/" + record.id);
                                        }}>修改</a>
                                        <Popconfirm placement="top" okText="确认" cancelText="关闭" title="是否确定删除?" onConfirm={() =>{
                                            BBSService.deleteOne(record.id).done(()=>{
                                                this.fetch(this.state.pagination);
                                            })
                                        }}>
                                            <a>删除</a>
                                        </Popconfirm>
                                        <a onClick={()=>{
                                            this.props.history.push("/bbs/commentList/" + record.id);
                                        }}>查看评论</a>
                                    </div>
                                )
                            }
                        },
                    ]}
                    pagination={this.state.pagination}
                    onChange={this.fetch.bind(this)}
                />
            </Card>
        )
    }
}